<template>
  <el-card shadow="hover" class="Disput box-card m-t20">
    <el-row class="mb-4 spaceBetween">
      <div class="dispute-t">
        <img src="@/assets/icons/Dispute.svg" alt="" srcset="" />
        <div class="t-txt">
          <span class="p13777">Refund amount</span>
          <p class="p13222">100.00 USD</p>
        </div>
      </div>
      <div class="dispute-t">
        <img src="@/assets/icons/Dispute1.svg" alt="" srcset="" />
        <div class="t-txt">
          <span class="p13777">Refund shipping costst</span>
          <p class="p13222">100.00 USD</p>
        </div>
      </div>
      <div class="dispute-t">
        <img src="@/assets/icons/Dispute2.svg" alt="" srcset="" />
        <div class="t-txt">
          <span class="p13777">Stutas</span>
          <p class="p13222">
            <span :class="['in-dispute', { disabled: isClose }]">{{
              !isClose ? "In dispute" : "End of dispute"
            }}</span>
            <span v-if="!isClose" class="Close" @click="close"> Close</span>
          </p>
        </div>
      </div>
      <div class="dispute-t">
        <img src="@/assets/icons/Dispute3.svg" alt="" srcset="" />
        <div class="t-txt">
          <span class="p13777">Created at</span>
          <p class="p13222 f400">July 26, 2023 at 4:21 pm</p>
        </div>
      </div>
    </el-row>
    <el-scrollbar height="300px" class="timeline">
      <el-timeline>
        <el-timeline-item
          v-for="(d, index) in paneData.data"
          :key="index"
          :timestamp="d.timestamp"
          :color="d.color"
          placement="top"
        >
          <div>
            {{ d.content }}
            <el-button type="danger" v-if="index === 0" link
              >下载附件</el-button
            >
          </div>
        </el-timeline-item>
      </el-timeline>

      <div class="mb-4 spaceBetween">
        <div class="mb-input">
          <el-input
            :disabled="isClose"
            maxlength="500"
            show-word-limit
            v-model="desc"
            type="textarea"
            style="width: 100%; height: 76px"
          />
        </div>

        <el-button class="bt" :disabled="isClose" type="danger" @click="submit"
          >Submit</el-button
        >
      </div>
    </el-scrollbar>
    <!--  -->
    <div class="orderTable">
      <el-table :data="tableData" height="500">
        <el-table-column prop="Product " label="Product" min-width="200">
          <template #default="scope">
            <OrderProduct :scope="scope" />
          </template>
        </el-table-column>
        <el-table-column prop="Cost" label="Cost ">
          <p class="p-22214">
            <strong class="p-22214">1231 </strong>
            <span class="p13222"> USD </span>
          </p>
        </el-table-column>
        <el-table-column prop="Quantity" label="Quantity">
          <strong class="p-22214">1231 </strong>
        </el-table-column>
        <el-table-column
          v-if="props.type !== 'Resended'"
          label="ScareOrder Quote"
          class-name="o-Quote"
        >
          <el-table-column
            prop="address1"
            label="Product cost"
            class-name="o-Quote"
            min-width="100px"
          >
            <p class="p-22214">
              <strong class="p-22214">1231 </strong>
              <span class="p13222"> USD </span>
            </p>
          </el-table-column>
          <el-table-column
            label-class-name="borLeftNone"
            prop="Shipping"
            label="Shipping"
            class-name="o-Quote"
          >
            <p class="p-22214">
              <strong class="p-22214">1231 </strong>
              <span class="p13222"> USD </span>
            </p>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="Quantity" label="Quantity">
          <strong class="p-22214">Request for Cancellation </strong>
        </el-table-column>
        <el-table-column prop="Results" label="Results">
          <span class="Results">
            Resend
            <p>approved</p>
          </span>
        </el-table-column>
      </el-table>
    </div>
  </el-card>

  <!--  -->
  <el-dialog
    v-model="dialogVisible"
    align-center
    :show-close="false"
    width="30%"
    custom-class="DisputDialog"
  >
    <el-icon size="70" color="#EBBB89"><Warning /></el-icon>
    <p class="t1">Are you sure？</p>
    <p class="t2">
      Are you sure you want to close the status from the dispute?
    </p>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onOk">Yes</el-button>
        <el-button @click="dialogVisible = false"> Cancel </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import OrderProduct from "@/components/OrderTable/orderProduct.vue";
const props = defineProps(["type"]);
const dialogVisible = ref(false);
const desc = ref("");
const isClose = ref(false);
const submit = (e: any) => {
  console.log(e);
};
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    input2: 231,
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    input2: 123,
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    input2: 1,
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    input2: 231,
  },
  {
    date: "2016-05-08",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const onOk = () => {
  isClose.value = true;
  dialogVisible.value = false;
};

const close = () => {
  console.log();
  dialogVisible.value = true;
};
const paneData = reactive({
  data: [
    {
      content:
        "Departure from inward Office of ExchangeDeparture from inward Office ",
      timestamp: "2022-08-25",
      color: "#000",
    },
    {
      content:
        "Departure from inward Office of ExchangeDeparture from inward Office ",
      timestamp: "2018-04-24",
    },
    {
      content:
        "Departure from inward Office of ExchangeDeparture from inward Office ",
      timestamp: "2018-04-23",
    },
    {
      content:
        "Departure from inward Office of ExchangeDeparture from inward Office ",
      timestamp: "2018-04-23",
    },
    {
      content:
        "Departure from inward Office of ExchangeDeparture from inward Office ",
      timestamp: "2018-04-23",
    },
    {
      content:
        "Departure from inward Office of ExchangeDeparture from inward Office ",
      timestamp: "2018-04-23",
    },
    {
      content:
        "Departure from inward Office of ExchangeDeparture from inward Office ",
      timestamp: "2018-04-23",
    },
  ],
});
</script>
<style lang="scss" scoped>
.Disput {
  margin: 20px 0;
}
.Results {
  color: var(--unnamed, #427f11);

  /* 文字/13px-Regular */
  font-family: Proxima Nova;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px; /* 146.154% */
}

.dispute-t {
  display: flex;
  align-items: self-start;
  .t-txt {
    margin-left: 5px;
    line-height: 15px;
    p {
      font-weight: 600;
      line-height: 30px;
    }
    .f400 {
      font-weight: 400 !important;
    }
    .in-dispute {
      border: 1px solid #df4545;
      background: #ffebeb;
      color: #d40000;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px; /* 150% */
      display: inline-block;
      padding: 0px 4px;
      align-items: flex-start;
    }
    .Close {
      color: var(--unnamed, #bc1f22);
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      cursor: pointer;
    }
  }
}
.timeline {
  margin: 20px 1px;
}
::v-deep .el-scrollbar__view {
  margin: 0 1px;
}
.mb-4 {
  display: flex;
  .mb-input {
    width: 85%;
  }
  .bt {
    margin-right: 10px;
  }
}
.el-table .el-table__cell {
  color: var(--unnamed, #777);
  font-size: 13px;
  font-weight: 400;
}
.disabled {
  border: 1px solid #999 !important;
  background: rgba(144, 147, 152, 0.1) !important;
  color: var(--unnamed, #999) !important;
}
</style>